<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    var timeChunk = function(arr,fn,count){
        var obj,timer;
        var len = arr.length;

        var start = function(){
            for(var i =0;i< Math.min(count || 1,arr.length);i++){
                var obj = arr.shift();
                fn(obj);
            }
        };

        return function(){
            timer =  setInterval(function(){
                if(arr.length === 0){ 
                    return clearInterval(timer);
                }
                start();
            },500); //分批执行的时间间隔，也可以用参数的形式
        } 
    }

    var arr =[];
    for(var i =0;i<1000;i++){
        arr.push(i);
    }


    //创建函数
    var renderFriendList = timeChunk(arr,function(n){
        var oDiv = document.createElement("div");
        oDiv.innerHTML = n;
        document.body.appendChild(oDiv);
    },8);


    renderFriendList();
</script>